<template >
  <div class="exchange-tabs-convert">
    <div class="wrap-box">
      <p class="title">
        {{ type === 'USDT' ? `Convert the dug TRX currency into usdt` : `Convert the dug ${type} currency into usdt` }}
      </p>
      <template v-if="type === 'ETH' | type === 'TRX'">
        <div class="exchange-box">
          <div class="change-box">
            <div class="input-box">
              <input type="text" v-model="token">
              <div class="all">All</div>
            </div>
            <div class="icon-box">
              <img :src='`/${type}.png`' alt="图标加载失败">
              <p>{{ type }}</p>
            </div>
          </div>
          <img class="exchange-icon" src="/down1.png" alt="图标加载失败">
          <div class="change-box">
            <div class="input-box">
              <input type="text" v-model="usdt">
            </div>
            <div class="icon-box">
              <img src="/USDT.png" alt="图标加载失败">
              <p>USDT</p>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <p class="desc">
          Your withdrawal will be sent to your usdt wallet address within the next 24 hours
        </p>
        <div class="exchange-box">
          <div class="change-box">
            <div class="input-box">
              <input type="text" v-model="usdt">
              <div class="all">All</div>
            </div>
            <div class="icon-box">
              <img :src='`/${type}.png`' alt="图标加载失败">
              <p>{{ type }}</p>
            </div>
          </div>
        </div>
        <p class="charge">Service charge：2</p>
        <div class="btn">
          <p>Withdrawal</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      token: "0",
      usdt: "0.00"
    }
  },
  methods: {}
}
</script>

<style lang="scss" >
.exchange-tabs-convert {
  width: rem(345);
  background: #fff;
  box-shadow: rem(2) rem(4) rem(8) rgb(190 178 213 / 50%);
  border-radius: rem(8);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: rem(15);
  margin: 0 auto;
  margin-bottom: rem(15);

  .wrap-box {

    .title {
      margin: rem(30) 0 rem(20) 0;
      font-size: rem(14);
      font-weight: 700;
      color: #333;
      height: rem(21);
      line-height: rem(21);
      text-align: center;
    }

    .exchange-box {
      @include center;
      flex-direction: column;



      .change-box {
        width: rem(315);
        height: rem(57);
        border-radius: rem(8);
        border: rem(1) solid #e5e5e5;
        display: flex;
        align-items: center;
        padding-left: rem(15);

        .input-box {
          @include between;
          width: rem(210);
          height: rem(33);
          background: #f5f5f5;
          border-radius: rem(8);
          padding: 0 rem(17);

          input {
            width: rem(160);
            font-size: rem(14);
            color: #666;
            background: #f5f5f5;
            padding-right: rem(6);
          }

          .all {
            color: rgb(0, 82, 255);
            font-size: rem(12);
          }
        }

        .icon-box {
          @include vC;

          img {
            width: rem(24);
            height: rem(24);
            border-radius: 50%;
            background: #f0f0f0;
            margin-left: rem(10);
          }

          p {
            font-size: rem(14);
            color: #000;
            margin-left: rem(5);
          }
        }
      }

      .exchange-icon {
        height: rem(46);
        margin: rem(22) 0;
      }
    }

    .desc {
      font-size: rem(12);
      line-height: rem(18);
      color: #666;
      margin-top: rem(8);
      text-align: center;
    }

    .charge {
      height: rem(43);
      text-align: right;
      margin-top: rem(10);
      width: rem(315);
      font-size: rem(12);
      color: #333;
    }

    .btn {
      width: rem(160);
      height: rem(32);
      background-color: rgb(1, 98, 255);
      border-radius: rem(8);
      font-size: rem(14);
      color: #fff;
      margin: 0 auto;
      @include center;
    }

  }
}
</style>
